<template>
    <fieldset class="file">
        <legend>歌单</legend>
        <h1 class="nine">
            <a href="#">春天</a>  
        </h1>   
        <h1>小芳</h1>
        <h1 class="l">流浪的歌</h1>
        <fieldset>
            <legend>content</legend>
            <div class="content">
                <h1>大标签</h1>
                <b>b标签</b>
                <em>em标签</em>
            </div>
            <div class="content2">
                <a href="#">a1</a>
            </div>
            <div class="content3">
                <a href="#">a2</a>
            </div>
            <div class="content4">
                <a href="#">a3</a>
            </div>
            <h1 class="mix">混合</h1>
            <b class="b">一个朴实无华的b标签</b>
        </fieldset>
    </fieldset>
</template>
<!-- 局部编写样式 -->
<style lang="scss" scoped>

// 导入文件------@import '';
// 导入外部样式后面结尾要加上分号，不然语法有错误；
@import "../../../assets/test.scss";


$f:40px;
$c:pink;

//  函数
// 1. 使用关键字@funtion 来声明函数
// 2. 使用关键字@return 来返回结果
// 3. 使用$+名字来定义函数的参数
@function fn($size){
    @return $size + 50px
}
.b{
    font-size:fn(20);
}

// 混入(mixin),也叫 混合器
// 定义一个混合器使用  @mixin 关键字
@mixin bd{
    border: 2px solid #ccc;
    background-color: $y;
    font-size: 30px;
    font-weight: 900;
    text-decoration: line-through;
}
// h1{
//     font-size: $f;
//     color:$c;
// }

// 嵌套结构
.file{
    .nine{
        // 不能继承样式
        // color:$c;
        a{
            text-decoration: none;
            color:$c;
        }
    }
    // 在嵌套中还有一个标识符我们可以使用，是 & ，用于伪类
    .l{
        // 不写&，:hover会有空格，样式不生效
        &:hover{
            background-color: greenyellow;
        }
    }
}
// 群组嵌套
    //  群组嵌套就是多个标签同时嵌套
    // 1.一个嵌套多个
    .content{
        h1,b,em{
            color:$c;
        }
    }
    // 2.多个嵌套一个
    .content2,.content3,.content4{
        a{
            background-color:greenyellow;
            // 嵌套属性
            font:{
                size:40px;
                width: 700;
            };
            @include bd;
            border: 2px solid pink{
                right: none
            };
        }
    }
// 混入(mixin)
// 使用混合器使用 @include 关键字
    .mix{
        @include bd
    }

//   注释
//   在 scss 文件中的注释分为几种:
//   1. 编译的时候不会被编译的注释
//      // 我是一个普通注释，在编译的时候，我就被过滤了
//   2. 编译的时候会被编译的注释
//      /* 我在编译的时候，会被一起编译过去 */
//   3. 强力注释
//      /*! 我是一个强力注释，不光编译的时候会被编译过去，将来压缩文件的时候也会存在 */


</style>